<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>评论</p>
			<BackButton />
		</header>
		<!--评论区部分-->
		<ul class="remark-box">
			<li v-for="item in remarkArr" :key="item.username">
				<div class="id">{{item.username}}   :   {{item.remark}}</div>
				<!-- <div class="dot">:</div> -->
				<div class="content"></div>
				<!--<div class="time">{{item.commentTime}}</div>-->
				<!-- <i class="fa fa-remove" @click="deleteRemark(this.remark)"></i> -->
			</li>
		</ul>
		<!-- 发表评论部分 -->
		<div class="search">
			<div class="search-content">
				<p>评论：</p>
			</div>
			<input type="text" v-model="remarks" placeholder="评论">
			<i class="fa fa-mail-reply" @click="userRemark(remarks)"></i>
		</div>
		<!--底部部分-->
		<Footer></Footer>
	</div>
</template>

<script>
	import BackButton from '../components/BackButton.vue';
	export default {
		name: 'AppRemark',
		data() {
			return {
				businessId: this.$route.query.businessId,
				remarks: '',
				remarkArr: [],
				user: {}
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			this.$axios.post('CommentController/showComments', this.$qs.stringify({
				businessId: this.businessId
			})).then(response => {
				if (response.data.code === '200') {
					// 使用 for 循环遍历评论数组
					const remarks = response.data.result;
					for (let i = 0; i < remarks.length; i++) {
						// 你可以在这里处理每一条评论对象
						let comment = remarks[i];
						
						// 例如：可以对某些字段进行处理或者过滤
						this.remarkArr.push({
							username: comment.username,
							remark: comment.remark,
							commentTime: comment.commentTime
						});
						console.log(comment);
				}
			}
			}).catch(error => {
				console.error(error); //输出错误信息
			});
		},
		methods: {
			userRemark() {
				if (this.remarks == '') {
					alert('评论不能为空！');
					return;
				}
				this.$axios.post('CommentController/user/createComment', this.$qs.stringify({
                    userId: this.user.userId,
					remark: this.remarks,
					businessId: this.businessId,
				})).then(response => {
					if (response.data.code=='200') {
						alert('评论成功！');
						this.$axios.post('CommentController/showComments', this.$qs.stringify({
							businessId: this.businessId
						})).then(response => {
							this.remarkArr = response.data;
						}).catch(error => {
							console.error(error); //输出错误信息
						});
						this.remarks='';
					} else {
						alert('评论失败！');
					}
				}).catch(error => {
					console.error(error);
				});
			}
		},
		components: {
			BackButton
		}
	}
</script>
<style scoped>
	.wrapper {
		min-height: 150vh;
		display: flex;
		flex-direction: column;
	}

	/* 给页面内容预留出与footer等高的空间 */
	.content {
		flex: 1;
		padding-bottom: 14vw; /*设置与 footer 高度相同的底部内边距 */
	}

	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		display: flex;
		justify-content: center;
		align-items: center;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
	}

	/****************** 评论区 ******************/
	.wrapper .remark-box {
		width: 100%;
		margin-top: 12vw;
		margin-bottom: 24vw;
	}

	.wrapper .remark-box li {
		position: relative;
		width: 100%;
		height: 7vw;
		border: 1px solid #000000;
		margin-bottom: 0.2vw;
		border-radius: 0.4vw;
		font-size: 3.5vw;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.wrapper .remark-box li .id {
		margin-left: 5vw;
	}
	.wrapper .remark-box li .dot {
		position: absolute;
		margin-left: 15vw;
	}
	.wrapper .remark-box li .content {
		margin-left: 8vw;
	}

	/****************** 评论 *****************/

	.wrapper .search {
		width: 100%;
		height: 10vw;
		background-color: #0097FF;
		position: fixed;
		bottom: 14vw;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 0.5vw;
	}

	.wrapper .search .search-content {

		display: flex;
		justify-content: center;
		align-items: center;

		font-size: 3.5vw;

		margin-left: 2.5vw;
	}

	.wrapper .search input {
		width: 70%;
		height: 5vw;
		border: none;
		border-radius: 4px;
		font-size: 2.5vw;
		color: #000;
		background-color: #f0f0f0;
		padding: 0 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		transition: background-color 0.3s ease;
	}

	.wrapper .search input:focus {
		outline: none;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	}

	.wrapper .search .fa-mail-reply {
		font-size: 5vw;
		margin: 0 2vw 0 2vw;
	}
</style>
